<template>
  <div class="h-full w-full relative">
    <div class="h-370px menu pt-5px pl-5px">
      <ul @mouseover="onMouseover" @mouseleave="onMouseleave" relative>
        <li v-for="(item, index) in positionList" class="menu-item" :key="index" :data-index="item.code">
          <span>{{ item.name }}</span>
          <span class="i-mdi-chevron-right text-16px"></span>
        </li>
        <li class="submenu-wrapper" v-if="visible">
          <ElScrollbar>
            <div class="pr-100px">
              <div class="text-18px text-#3375E8 font-700">{{ current?.name }}</div>
              <template v-for="(item, index) in current.children" :key="item?.code">
                <div class="text-#222222 text-14px font-700 mt-16px mb-13px" :class="{ 'mt-20px': index !== 0 }">
                  {{ item.name }}
                </div>
                <div class="flex flex-wrap mx--10px my--5px">
                  <a
                    class="mx-10px my-5px text-#666666"
                    v-for="subItem in item?.children"
                    :key="subItem.code"
                    @click="onMoreJobs(subItem)"
                    >{{ subItem.name }}</a
                  >
                </div>
              </template>
            </div>
          </ElScrollbar>
        </li>
      </ul>
    </div>
    <div class="h-40px"></div>
  </div>
</template>

<script lang="ts" setup>
import CommonService from '@/api/common';
import { debounce } from 'lodash-es';
const router = useRouter();
const visible = ref(false);
const onMouseover = debounce((e: any) => {
  const target = e.target;
  const tagName = e?.target?.tagName?.toLowerCase();
  const set = (v: any) => {
    const item = positionList.value?.find((t: any) => t.code === v);
    if (item) {
      current.value = item;
      visible.value = true;
    }
  };
  if (tagName) {
    if (tagName === 'li') {
      const code = target.getAttribute('data-index');
      code && set(code);
    } else if (tagName == 'svg') {
      const code = target?.parentNode?.getAttribute('data-index');
      code && set(code);
    }
  }
}, 300);

function onMoreJobs(item: any) {
  router.push(`/search-position?code=${current.value?.code}`);
}
let _positionList: any = [];
const current = ref();
const { pageInfo } = usePager({
  pageNum: 1,
  pageSize: 7,
  pageTotal: 0,
  pageLoading: false,
});
const totalPage = computed(() => {
  return parseInt(((pageInfo.pageTotal + pageInfo.pageSize - 1) / pageInfo.pageSize) as unknown as string);
});
const positionList = ref<any>([]);
function onMouseleave() {
  visible.value = false;
}

// @ts-ignore
function _onChangePage(page: number) {
  if (page < 1) page = 1;
  if (page > totalPage.value) {
    page = totalPage.value;
  }
  pageInfo.pageNum = page;
  positionList.value = _positionList.slice((page - 1) * 7, page * 7);
}
async function init() {
  try {
    const resp = await CommonService.selectPositionListFromRedis<any[]>();
    if (resp.code != 200) return;
    console.log(resp, 'resp');
    const data = array2Tree(resp.data, '', 'code', 'parentCode');
    // pageInfo.pageTotal = data?.length || 0;
    _positionList = data;
    positionList.value = _positionList.slice(0, 7);
  } catch (error) {
    console.log(error);
  }
}

onMounted(() => {
  init();
});
</script>

<style lang="scss" scoped>
.menu {
  .menu-item {
    @apply h-45px rounded-l-5px transition-all lh-45px pl-14px font-700 text-15px text-#999 cursor-pointer flex items-center justify-between pr-20px;
    &:hover {
      background: linear-gradient(90deg, #deebfd, #ffffff);
      @apply text-#3375e8;
    }
  }

  .submenu-wrapper {
    @apply w-720px h-410px absolute top--5px left-215px pl-16px  pt-16px pb-20px overflow-hidden;
    background: url(../../assets/images/index-submenu-bg@2x.png) no-repeat;
    background-size: 100% 100%;
  }
}
</style>
